<template>
  <div class='projectedit-container el-col el-col-12'>
    <el-form ref='form' :model='form' label-width='80px'>
      <el-form-item label='作品名称'>
        <el-input v-model='form.project_name' placeholder='请填写作品名称'></el-input>
      </el-form-item>

      <el-form-item label='指导老师'>
        <el-input v-model='form.adviser' placeholder='请填写知道老师名称'></el-input>
      </el-form-item>

      <el-form-item label='作者名称'>
        <el-input v-model='form.declarant' placeholder='请填写作品名称'></el-input>
      </el-form-item>

      <el-form-item label='选择学院'>
        <el-select v-model='form.academy' placeholder='请选择学院'>
          <el-option
            v-for='item in academy'
            :key='item.value'
            :label='item.label'
            :value='item.value'>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='选择专业'>
        <el-select v-model='form.major' placeholder='请选择专业'>
          <el-option
            v-for='item in major'
            :key='item.value'
            :label='item.label'
            :value='item.value'>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='选择年级'>
        <el-select v-model='form.grade' placeholder='请选择年级'>
          <el-option
            v-for='item in grade'
            :key='item' 
            :label='item'
            :value='item'>
          </el-option>
        </el-select>
      </el-form-item>
    
      <el-form-item label='作品类别'>
        <el-radio-group v-model='form.type'>
          <el-radio :label='1' name='type'>理科类学术论文</el-radio>
          <el-radio :label='2' name='type'>文科类学术论文</el-radio>
          <el-radio :label='3' name='type'>创业计划</el-radio>
          <el-radio :label='4' name='type'>社会调查报告</el-radio>
          <el-radio :label='5' name='type'>发明制作</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label='申报文档'>
        <aetherupload v-model='form.doc_url' tip='作品正文的PDF版本，且不超过10M'></aetherupload>
      </el-form-item>
      <el-form-item label='相关文件'>
        <aetherupload v-model='form.rar_url' tip='只能上传压缩文件文件，且不超过100M'></aetherupload>
      </el-form-item>
      <el-form-item>
        <el-button type='primary' @click='onSubmit' v-show='!isAudit' :loading='loadding'>保存修改</el-button>
        <el-button type='success' @click='onSubmitAudit' v-show='!isAudit' :loading='loaddingAudit'>提交审核</el-button>
      </el-form-item>
    </el-form>

    <el-steps :space="300" :active="2" v-show='isAudit'>
      <el-step title="创建项目" description="完善项目信息"></el-step>
      <el-step title="提交审核" description="提交审核就不允许修改"></el-step>
      <el-step title="审核结果" description="等待审核结果"></el-step>
    </el-steps>
  </div>
</template>

<script>
import aetherupload from '@/components/aetherupload'
import { fetchList } from '@/api/common/projectType'
import { update, edit, submitAudit } from '@/api/common/project'

export default {
  name: 'project-student',
  components: { aetherupload },
  data() {
    return {
      loadding: false,
      loaddingAudit: false,
      isAudit: false,
      form: {
        project_name: '',
        adviser: '',
        type: '',
        declarant: '',
        academy: '',
        major: '',
        grade: '',
        doc_url: '',
        rar_url: ''
      },
      academy: [
        {
          value: 1,
          label: '计算机科学与信息工程'
        }
      ],
      major: [
        {
          value: 1,
          label: '计算机科学与信息工程'
        },
        {
          value: 2,
          label: '软件工程'
        }
      ],
      grade: [2017, 2016, 2015, 2014]
    }
  },
  created() {
    this.edit()
  },
  methods: {
    edit() {
      edit(this.form).then(response => {
        let result = response.data
        this.form.project_name = result.data.project_name
        this.form.type = result.data.project_type_id
        this.form.adviser = result.data.adviser
        this.form.declarant = result.data.declarant
        this.form.academy = result.data.academy_id
        this.form.major = result.data.major_id
        this.form.grade = result.data.grade
        this.form.doc_url = result.data.doc_path
        this.form.rar_url = result.data.rar_path
        this.isAudit = result.data.is_audit
      })
    },
    store() {
      this.loadding = true
      update(this.form).then(response => {
        this.loadding = false
        let result = response.data
        this.$message({
          showClose: true,
          type: result.code === 200 ? 'success' : 'error',
          message: result.msg,
          duration: 1500,
          onClose: () => {
            if (result.code === 200) {
              return
            }
          }
        })
      })
    },
    update() {

    },
    getProjectType() {
      fetchList().then(response => {})
    },
    onSubmit() {
      this.store()
    },
    onSubmitAudit() {
      this.loaddingAudit = true
      submitAudit().then(response => {
        this.loaddingAudit = false
        let result = response.data
        this.$message({
          showClose: true,
          type: result.code === 200 ? 'success' : 'error',
          message: result.msg,
          duration: 1500,
          onClose: () => {
            if (result.code === 200) {
              this.isAudit = true
            }
          }
        })
      })
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.projectedit-container {
  padding: 30px;
  .el-select {
    width: 100%;
  }

  .el-radio-group .el-radio {
    float: left;
    width: 140px;
    line-height: 36px;
    margin: 0;
    padding: 0;
  }

  .el-steps {
    margin-left: 20px;
  }
}
</style>
